<!DOCTYPE html>
<html>
<head>
    <title>梦幻烟花与心形流星雨</title>
    <style>
        body {
            margin: 0;
            padding: 0;
            background: #1a1a1a; /* 深色背景，更好地突出烟花效果 */
            overflow: hidden;
        }

        /* 心形样式 */
        .heart {
            position: absolute;
            width: 20px;
            height: 20px;
            background: #ff69b4;
            transform: rotate(45deg);
            animation: fall linear infinite;
            z-index: 1;
        }

        .heart:before,
        .heart:after {
            content: '';
            width: 20px;
            height: 20px;
            background: inherit;
            border-radius: 50%;
            position: absolute;
        }

        .heart:before {
            left: -10px;
        }

        .heart:after {
            top: -10px;
        }

        @keyframes fall {
            0% {
                transform: rotate(45deg) translateX(0) translateY(-100vh);
                opacity: 1;
            }
            100% {
                transform: rotate(45deg) translateX(100px) translateY(100vh);
                opacity: 0;
            }
        }

        /* 烟花样式 */
        .firework {
            position: absolute;
            width: 4px;
            height: 4px;
            border-radius: 50%;
            animation: explode 1.2s ease-out forwards;
            box-shadow: 0 0 10px 2px rgba(255, 255, 255, 0.3);
        }

        @keyframes explode {
            0% {
                transform: scale(1);
                opacity: 1;
            }
            100% {
                transform: scale(40);
                opacity: 0;
            }
        }

        .particle {
            position: absolute;
            width: 3px;
            height: 3px;
            border-radius: 50%;
            animation: shoot 1.2s ease-out forwards;
            box-shadow: 0 0 6px 1px rgba(255, 255, 255, 0.3);
        }

        @keyframes shoot {
            0% {
                transform: translateX(0) translateY(0);
                opacity: 1;
            }
            100% {
                transform: translateX(var(--tx)) translateY(var(--ty));
                opacity: 0;
            }
        }
    </style>
</head>
<body>
    <script>
        // 心形流星雨
        function createHeart() {
            const heart = document.createElement('div');
            heart.className = 'heart';
            
            heart.style.left = Math.random() * window.innerWidth + 'px';
            
            const size = Math.random() * 15 + 10;
            heart.style.width = size + 'px';
            heart.style.height = size + 'px';
            
            const duration = Math.random() * 2 + 2;
            heart.style.animationDuration = duration + 's';
            
            const colors = [
                '#ff69b4', // 热粉红
                '#ffb6c1', // 浅粉红
                '#ffc0cb', // 粉红
                '#ff1493', // 深粉红
                '#ff82ab'  // 亮粉红
            ];
            const color = colors[Math.floor(Math.random() * colors.length)];
            heart.style.background = color;
            
            document.body.appendChild(heart);
            
            setTimeout(() => {
                heart.remove();
            }, duration * 1000);
        }

        // 创建烟花
        function createFirework() {
            const firework = document.createElement('div');
            firework.className = 'firework';
            
            const x = Math.random() * window.innerWidth;
            const y = Math.random() * (window.innerHeight * 0.6);
            firework.style.left = x + 'px';
            firework.style.top = y + 'px';

            // 更新后的烟花颜色
            const colors = [
                '#FF3232', // 鲜红色
                '#FF4500', // 红橙色
                '#FFD700', // 金色
                '#FFFFFF', // 纯白色
                '#FFA500', // 橙色
                '#FF69B4'  // 粉红色（保留一些粉色元素）
            ];
            const color = colors[Math.floor(Math.random() * colors.length)];
            firework.style.backgroundColor = color;

            document.body.appendChild(firework);

            // 创建烟花粒子
            for (let i = 0; i < 40; i++) {
                const particle = document.createElement('div');
                particle.className = 'particle';
                particle.style.left = x + 'px';
                particle.style.top = y + 'px';
                particle.style.backgroundColor = color;

                const angle = (i / 40) * Math.PI * 2;
                const velocity = 150 + Math.random() * 100;
                particle.style.setProperty('--tx', Math.cos(angle) * velocity + 'px');
                particle.style.setProperty('--ty', Math.sin(angle) * velocity + 'px');

                document.body.appendChild(particle);

                setTimeout(() => {
                    particle.remove();
                }, 1200);
            }

            setTimeout(() => {
                firework.remove();
            }, 1200);
        }

        // 创建上升的烟花火线
        function createFireworkTrail() {
            const trail = document.createElement('div');
            trail.className = 'firework-trail';
            
            const startX = Math.random() * window.innerWidth;
            const endY = Math.random() * (window.innerHeight * 0.6);
            
            trail.style.left = startX + 'px';
            trail.style.bottom = '0';
            
            document.body.appendChild(trail);
            
            // 模拟烟花上升后爆炸
            setTimeout(() => {
                trail.remove();
                createFirework(startX, endY);
            }, 1000);
        }

        // 定时创建效果
        setInterval(createHeart, 150);    // 心形
        setInterval(createFirework, 1000); // 烟花
    </script>
</body>
</html>